<template>
	<view class="container">
		<view class="recharge-mode">
			<view class="left">
				提现至
			</view>
			<view class="right">
				<text>{{ driver.getCurrentDriver().bankName }}</text>
				<text>（{{ substringSuffix(driver.getCurrentDriver().bankCardId, 4) }}）</text>
				<uni-icons type="right" ></uni-icons>
			</view>
		</view>
		<view class="recharge-amount">
			<view class="up">
				提现金额
			</view>
			<view class="down">
				<!--自定义金额-->
				<view 
					class="custom-amount" 
					:class="{ selected: 0 === selectedDomId }" 
					@tap="changeCurrDomId(0)"
				>
					<view class="custom-left" >
						自定义提现
					</view>
					<view class="custom-right">
						<input type="number" v-model="inputAmount" @input="onInput" placeholder="请输入金额" placeholder-style="font-size: 30rpx;"/>
					</view>
				</view>
				<!--可选金额-->
				<view class="choose-amount">
					<view 
					class="chooseable-item" 
					:class="{ selected: amt === selectedDomId }" 
					v-for="(amt, idx) in chooseableAmounts" 
					:key="idx" 
					@tap="changeCurrDomId(amt)">
						{{ amt }}元
					</view>
				</view>
			</view>
		</view>
		<view class="remaining-balance">
			<text>可提现余额 ￥{{ formatAmount(driver.getCurrentDriver().accountBalance - driver.getCurrentDriver().withdrawingBalance) }}</text>
			<text>提现中金额 ￥{{ formatAmount(driver.getCurrentDriver().withdrawingBalance) }}</text>
		</view>
		<view class="recharge-btn primary-btn" @tap="handleRecharge">
			￥{{ btnAmount }} 立即提现
		</view>
	</view>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useUserStore } from '@/stores/userStore.js'
import { substringSuffix } from '@/utils/stringUtil.js'
import { apiWithdraw } from '@/api/withdraw.js'
import { formatAmount } from '@/utils/amountUtil.js'

const driver = useUserStore()

const chooseableAmounts = ref([ 30, 50, 100, 150, 200, 300 ])

const selectedDomId = ref(30)

const inputAmount = ref(30)

const btnAmount = ref(30)

function changeCurrDomId (domId) {
	selectedDomId.value = domId
	if (domId === 0) {
		btnAmount.value = inputAmount.value
	} else {
		btnAmount.value = domId
	}
}

watch(inputAmount, (nv, ov) => {
	btnAmount.value = nv
})

function onInput (e) {
	// console.log(e.detail.value)
	const amountStrs = (e.detail.value + '').split('.')
	if (amountStrs.length === 2 && amountStrs[1].length > 2) {
		inputAmount.value = (e.detail.value * 1).toFixed(2)
	}
}

function handleRecharge () {
	if (!btnAmount.value) {
		uni.showToast({
			icon: 'none',
			title: '请输入金额！'
		})
		return
	} else if (btnAmount.value < 1) {
		uni.showToast({
			icon: 'none',
			title: '至少需要提现1元！'
		})
		return
	} else if (btnAmount.value > 10000) {
		uni.showToast({
			icon: 'none',
			title: '最多提现10000元！'
		})
		return
	}
	uni.showModal({
		title: '提示',
		content: `确定要提现${btnAmount.value}元吗？`,
		success: (res) => {
			if (res.confirm) {
				apiWithdraw({
					bankName: driver.getCurrentDriver().bankName,
					bankCardId: driver.getCurrentDriver().bankCardId,
					withdrawAmount: btnAmount.value * 100
				}).then(res => {
					setTimeout(() => {
						driver.refreshCurrentDriver()
					}, 200)
					uni.showToast({
						icon: 'none',
						title: '提现申请成功，金额将在3个工作日内到账',
						success: uni.navigateBack()
					})
				})
			}
		}
	})
}

</script>

<style lang="scss" scoped>
view {
	box-sizing: border-box;
}

.container {
	width: 100vw;
	height: 100vh;
	background-color: #f8f8f8;
	padding: 30rpx;
	.recharge-mode {
		display: flex;
		align-items: center;
		justify-content: space-between;
		// background-color: red;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #ddd;
		border-top: 1rpx solid #ddd;
		.left {
			
		}
		.right {
			display: flex;
			align-items: center;
		}
	}
	.recharge-amount {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #ddd;
		.up {
			
		}
		.down {
			margin-top: 20rpx;
			.custom-amount {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-radius: 20rpx;
				border: 2rpx solid #ccc;
				padding: 20rpx 60rpx;
				.custom-left {
					font-size: 26rpx;
				}
				.custom-right {
					flex: 1;
					input {
						text-align: center;
						font-size: 45rpx;
						font-weight: 600;
					}
				}
			}
			.selected {
				border-color: $uni-color-primary;
			}
			.choose-amount {
				margin-top: 20rpx;
			    display: grid;
			    grid-template-columns: repeat(3, 1fr); /* 三列 */
			    grid-template-rows: repeat(2, 1fr);    /* 两行 */
			    gap: 20rpx;                             /* 网格项之间的间距 */
				.chooseable-item {
					padding: 30rpx 0;
					border-radius: 20rpx;
					border: 2rpx solid #ccc;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.selected {
					border-color: $uni-color-primary;
				}
			}
		}
	}
	.remaining-balance {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #ddd;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.recharge-btn {
		margin-top: 20rpx;
		padding: 20rpx 0;
		text-align: center;
		color: #fff;
		border-radius: 8rpx;
		font-size: 32rpx;
	}
}

</style>